<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2 menu" md-component-id="left" md-is-locked-open="$media('gt-md')">
    <md-toolbar>
        <h1 class="md-toolbar-tools">Menu</h1>
    </md-toolbar>
    <md-content layout="column">
        <div layout="column" class="menu-header">
            <div>
                <img ng-src-cache="{{account.data.picto.src | mediaScreen}}"></img>
            </div>
            <h3>{{account.data.login}}</h3>
            <h3>{{account.data.contact.email}}</h3>
        </div>
        <div layout="column" layout-align="start center" class="menu-actions">
            <md-button ng-href="#account" aria-label="Account">
                <md-icon md-svg-src="/assets/icons/grey/th-large.svg" class="md-small"></md-icon>
                <span>Boutique</span>
            </md-button>
            <md-button ng-href="#subscriptions" aria-label="Account">
                <md-icon md-svg-src="/assets/icons/grey/bookmark.svg" class="md-small"></md-icon>
                <span>Mes abonnements</span>
            </md-button>
            <md-button ng-click="account.disconnect()" aria-label="Account">
                <md-icon md-svg-src="/assets/icons/grey/times.svg" class="md-small"></md-icon>
                <span>Déconnecter</span>
            </md-button>
        </div>
    </md-content>
</md-sidenav>

<div layout="column" layout-fill tabindex="-1" role="main">

	<md-toolbar class="toolbar md-whiteframe-z1">

        <div class="md-toolbar-tools">

            <md-button aria-label="Toggle Menu" ng-click="openMenu()" hide-gt-md>
                <md-icon md-svg-src="/assets/icons/white/bars.svg" class="md-medium"></md-icon>
            </md-button>

            <div layout flex>
                
                <div class="md-toolbar-item">
                    <md-button ng-click="back()" aria-label="Back">
                        <md-icon md-svg-src="/assets/icons/white/arrow-left.svg" class="md-medium"></md-icon>
                    </md-button>
                    <span hide-sm>Quarty</span>
                </div>

                <span flex></span>
                
                <div class="md-toolbar-item">
                    <md-button ng-href="/pro#editor" aria-label="Send">
	                    <md-icon md-svg-src="/assets/icons/white/pencil-square-o.svg" class="md-medium"></md-icon>
	                </md-button>
	                <md-button ng-href="/pro#search" aria-label="Search">
	                    <md-icon md-svg-src="/assets/icons/white/search.svg" class="md-medium"></md-icon>
	                </md-button>
                </div>
            </div>
        </div>
    </md-toolbar>
    
    <md-tabs md-selected="selectedIndex" class="md-whiteframe-z1 md-primary">
        <md-tab id="tab1" aria-controls="tab1-content">
			<span>En cours</span>
		</md-tab>
        <md-tab id="tab2" aria-controls="tab2-content">
            <md-icon md-svg-src="/assets/icons/white/archive.svg" class="md-medium"></md-icon>
        	<span hide-sm>Archives</span>
		</md-tab>
        <md-tab id="tab3" aria-controls="tab3-content">
            <md-icon md-svg-src="/assets/icons/white/heart-o.svg" class="md-medium"></md-icon>
			<span hide-sm>Boutiques</span>
        </md-tab>
    </md-tabs>

	<md-content md-scroll-y flex>
	    <ng-switch on="selectedIndex">
	        <div role="tabpanel" id="tab1-content" aria-labelledby="tab1" ng-switch-when="0" md-swipe-left="next()" md-swipe-right="previous()">
	            <div ng-controller="AliveCtrl" ng-include="'/app/partials/app/alerts.html'" layout="column" layout-fill layout-padding></div>
	        </div>
	        <div role="tabpanel" id="tab2-content" aria-labelledby="tab2" ng-switch-when="1" md-swipe-left="next()" md-swipe-right="previous()">
	            <div ng-controller="ArchivesCtrl" ng-include="'/pro/partials/app/archives.html'"layout="column" layout-fill layout-padding></div>
	        </div>
	        <div role="tabpanel" id="tab3-content" aria-labelledby="tab3" ng-switch-when="2" md-swipe-left="next()" md-swipe-right="previous()">
	            <div ng-controller="NewsCtrl" ng-include="'/app/partials/app/alerts.html'" layout="column" layout-fill layout-padding></div>
	        </div>
	    </ng-switch>
	</md-content>

</div>
